<script setup>
    import { ref } from 'vue';
    // tabs     
    const tabs = [
        { id: 1, name: '京东秒杀', isActive: true},
        { id: 2, name: '每日特价', isActive: false },
        { id: 3, name: '品类秒杀', isActive: false }
    ]

    //关键就是这个被选中的下标变量的设置
    const selectedIndex = ref(0);

    //不要忘记 .value
    const switchEffect = index => selectedIndex.value = index
</script>

<template>
    <div>
        <ul>
            <li v-for="item, index in tabs" :key="item.id" @click="switchEffect(index)">
                <a :class="{ active: index === selectedIndex }" href="#">{{ item.name }}</a>
            </li>
        </ul>
    </div>
</template>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        display: flex;
        border-bottom: 2px solid #e01222;
        padding: 0 10px;
    }

    li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        list-style: none;
        text-align: center;
    }

    li a {
        display: block;
        text-decoration: none;
        font-weight: bold;
        color: #333333;
    }

    li a.active {
        background-color: #e01222;
        color: #fff;
    }
</style>